<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
  </head>
<style>
  .display-flex {
    display: flex;
  }
  .flex1 {
    flex: 1;
  }

</style>
  <body>
    <div id="app">
      <div class="display-flex">
        <div class="flex1">
          <div class="">register</div>
          <div class="">
            <span v-for="(item,index) in memory" :key="index">
              {{item}}
            </span>
          </div>
          <div class="">
            set value 
            <div class="">
              <input type="number" v-model="form.index">
              <input type="number" v-model="form.value">
              <button @click="setValueToRegister">save</button>
            </div>
          </div>
          <div class="">
            read value 
            <div class="">
              <input type="number" v-model="form.readvalueIndex">
              <button @click="readValueToRegister">read</button>
            </div>
          </div>

        </div>
        <div class="flex1">
          busLogs  <button @click="busLogs=[]">clear busLogs</button>
          <div class="">
              <div class="display-flex" v-for="(item,index) in busLogs" :key="`0_${index}`" >
                <div class="flex1">
                  {{index}}:{{item}}
                </div>
                <div class="flex1">
                  {{transform(item)}}
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import {Register,Bus} from "../src/index.ts";
    import Vue from "./libs/vue.js"
    
    // 不需要编译器
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            readvalueIndex: 0,
            index: 0,
            value: 0
          },
          addr:100,
          busLogs: [],
          bus_register: {},
          register: {},
          memory:[]
        }
      },
      created() {
        this.init()
      },
      computed: {
      },
      methods: {
        input(data) {
          console.log("get data from bus", data);
          // 
        },
        transform(data) {
          const [toAddr,fromAddr] = data
          const sendData = data.slice(2)
          const localAddr = this.addr
          if (toAddr === localAddr) {
            return `response: from ${fromAddr},data is ${sendData}`
          } else if (fromAddr === localAddr) {
            return `send: to ${toAddr},data is ${sendData}`
          } else {
            return `others: to ${toAddr} from ${fromAddr},data is ${sendData}`
          }
        },
        setValueToRegister() {
          const {index,value} = this.form
          this.bus_register.input([1,this.addr,1,index*1,value*1])
          this.memory = this.register.memory
          this.$forceUpdate()
        },
        readValueToRegister() {
          const {readvalueIndex} = this.form
          const beforeBusLogsLength = this.busLogs.length
          this.bus_register.input([1,this.addr,0,readvalueIndex*1])
          const afterBusLogsLength = this.busLogs.length
          // 若 afterBusLogsLength - beforeBusLogsLength === 1，则表示时间栈中只有一个，若大于1，则需要将后面添加到 buslogs 的部分倒序
          if (afterBusLogsLength - beforeBusLogsLength > 1) {
            const newBusLogs = this.busLogs.slice(0,beforeBusLogsLength)
            const newBusLogs2 = this.busLogs.slice(beforeBusLogsLength).reverse()
            this.busLogs = [...newBusLogs,...newBusLogs2]
          }
          this.memory = this.register.memory
          this.$forceUpdate()
        },
        init() {
          const bus_register = new Bus()
          this.bus_register = bus_register
          const register = new Register(10);
          this.register = register
          this.memory = this.register.memory
          const {addr: registerAddr} = register.bindBus(bus_register)
          // const registerAddr = register
          
          bus_register.onOutput( (data) => {
            console.log("bus_register data", data);
            if (data[0]===this.addr && data[1]===registerAddr) {
              this.input(data.slice(2))
            }
            this.busLogs.push(data)
          });
          // console.log("register.memory", register.memory);
          // register.input([1,0x00,0x0a])
          // 给
          // bus_register.input([1,100,1,0x00,10])
          // bus_register.input([1,100,0,0x00])
        }
      }
    });

  </script>
</html>
